<template>
  <div>
    <h1>Info</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "~",
    };
  },

  created() {
    console.log("created");
  },

  /**
   * 1. 组件实例还未创建，不能获取到 this
   * 2. 唯一一个可以给 next 传递函数的 守卫
   *    该函数可以接受到一个 vm （当前组件实例）
   * 3. 如果期望请求能更快的发出，可以在这里写
   */
  beforeRouteEnter(to, from, next) {
    console.log("beforeRouteEnter");
    next((vm) => {
      // 该函数，会在组件实例创建完成之后触发，且会将组件实例作为传递传过来
      console.log(vm.msg);
    });
  },

  /**
   * 1. 离开前的二次确认弹窗
   */
  beforeRouteLeave(to, from) {
    console.log("beforeRouteLeave");

    if (!window.confirm("你确认要离开吗")) {
      return false;
    }
  },

  /**
   * 1. 用于解决详情页A参数直接跳转到详情页B参数，数据不更新的问题
   */
  beforeRouteUpdate() {
    console.log("beforeRouteUpdate");
  },
};
</script>
